<template>
  <div class="app">
    <!-- 标题 -->
    <Header></Header>
    <!-- 导航区 -->
    <div class="navi">
      <!-- RouterLink 标签设定路由跳转操控，其中 to 标签是要去的路由，active-class 是被选中时会添加的 class -->
      <!-- to 的字符串写法（简写） -->
      <RouterLink to="/home" active-class="active">首页</RouterLink>        
      <!-- to 的对象写法       -->
      <RouterLink :to="{path: '/news'}" active-class="active">新闻</RouterLink>   
      <RouterLink :to="{name: 'about'}" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <!-- RouterView 标签设定路由页面安放 -->
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
import { RouterView, RouterLink } from 'vue-router'
import Header from './components/Header.vue'

</script>

<style scoped>
/* 给 navi 添加样式 */
.navi {
  display: flex;
  /* 使用 flex 布局 */
  justify-content: center;
  /* 主轴居中对齐 */
  padding: 10px;
  /* 适当的内边距 */
}

/* navi 中的链接样式 */
.navi a {
  display: inline-block;
  /* 行内块元素 */
  margin: 0 5px;
  /* 适当的外边距 */
  padding: 8px 16px;
  /* 适当的内边距 */
  border-radius: 20px;
  /* 圆角 */
  background-color: #c0c0c0;
  /* 背景色为天蓝色 */
  text-decoration: none;
  /* 去除链接下划线 */
  color: #333;
  /* 文字颜色 */
}

.navi a.active {
  background-color: skyblue;
  font-weight: bold;
}

/* 给展示区添加样式 */
.main-content {
  display: grid;
  box-sizing: border-box;
  border: 2px solid #ccc;
  /* 大边框 */
  padding: 20px;
  /* 适当的内边距 */
  margin-top: 20px;
  /* 适当的外边距 */
  min-height: 400px;
  height: auto;
}
</style>